<div class="case-custom-fields" ng-controller="CaseCustomFieldsCtrl">
    <h4 class="vpad10 text-primary">
        Additional information
        <span uib-dropdown class="ml-m" ng-show="customFieldsAvailable">
            <a href class="dropdown-toggle" uib-dropdown-toggle>
                <i class="fa fa-plus"></i>
            </a>
            <ul class="dropdown-menu scroll-dropdown" uib-dropdown-menu>
                <li ng-repeat="key in keys(allCustomFields) | orderBy">
                    <a ng-click="addCustomField(allCustomFields[key])">{{allCustomFields[key].name}}</a>
                </li>
            </ul>
        </span>
    </h4>

    <div ng-if="!orderedFields || orderedFields.length === 0">
        <em>No additional information have been specified</em>
    </div>

    <dl class="dl-horizontal clear"
        ng-repeat="k in orderedFields"
        ng-init="fieldDef = customFieldsCache[k];">
        <dt class="pull-left" uib-tooltip="{{fieldDef.description}}">{{fieldDef.name}}</dt>
        <dd ng-if="fieldDef.options.length > 0">
            <updatable-select
                options="fieldDef.options"
                on-update="updateField(getCustomFieldName(fieldDef), newValue)"
                value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-select>
        </dd>

        <dd ng-if="fieldDef.options.length === 0" ng-switch="fieldDef.type">
            <updatable-simple-text ng-switch-when="string"
                input-type="text"
                on-update="updateField(getCustomFieldName(fieldDef), newValue)"
                value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-simple-text>

            <updatable-date ng-switch-when="date"
                on-update="updateField(getCustomFieldName(fieldDef), newValue)"
                value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-date>

            <updatable-simple-text ng-switch-when="number"
                input-type="number"
                on-update="updateField(getCustomFieldName(fieldDef), newValue)"
                value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-simple-text>

            <updatable-boolean ng-switch-when="boolean"
                input-type="number"
                on-update="updateField(getCustomFieldName(fieldDef), newValue)"
                value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-boolean>

            <span ng-switch-default>Not Editable</span>
        </dd>
    </dl>
</div>
